<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>个人信息</title>
    <link href="css/font-awesome.min.css" rel="stylesheet" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/templatemo-style.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/api.js"></script>
  </head>

  <body>
    <div class="templatemo-flex-row">
      <div class="templatemo-sidebar">
        <div class="mobile-menu-icon">
          <i class="fa fa-bars"></i>
        </div>
        <nav class="templatemo-left-nav">
          <ul>
            <li>
              <a href="考试中心.html"
                ><i class="fa fa-map-marker fa-fw"></i>考试中心</a
              >
            </li>
            <li>
              <a href="试题中心.html"
                ><i class="fa fa-database fa-fw"></i>试题中心</a
              >
            </li>
            <li>
              <a href="成绩中心.html"
                ><i class="fa fa-bar-chart fa-fw"></i>成绩中心</a
              >
            </li>
            <li>
              <a href="批改中心.html"
                ><i class="fa fa-star" aria-hidden="true"></i>批改中心</a
              >
            </li>
            <li>
              <a class="active"
                ><i class="fa fa-user-o" aria-hidden="true"></i>个人信息</a
              >
            </li>
            <li>
              <a href="index.html"><i class="fa fa-eject fa-fw"></i>退出</a>
            </li>
          </ul>
        </nav>
      </div>
      <div class="templatemo-content col-1 light-gray-bg">
        <div class="templatemo-content-container">
          <div
            class="templatemo-flex-row flex-content-row templatemo-overflow-hidden"
          >
            <div class="col-1 templatemo-overflow-hidden">
              <div
                class="templatemo-content-widget white-bg templatemo-overflow-hidden"
              >
                <div class="templatemo-flex-row flex-content-row">
                  <div id="app" class="container">
                    <form class="form-horizontal">
                      <div class="form-group">
                        <label class="col-sm-2 control-label">工号：</label>
                        <label class="control-label">{{
                          teacherInfor.teacher_no
                        }}</label>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">姓名：</label>
                        <label class="control-label">{{
                          teacherInfor.teacher_name
                        }}</label>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">权限：</label>
                        <label class="control-label">教师权限</label>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">邮箱：</label>
                        <label class="control-label">{{
                          teacherInfor.teacher_email
                        }}</label>
                      </div>
                      <div class="form-group">
                        <label class="col-sm-2 control-label">手机：</label>
                        <label class="control-label">{{
                          teacherInfor.teacher_phone
                        }}</label>
                      </div>

                      <div class="form-group">
                        <label class="col-sm-2 control-label"></label>
                        <button
                          type="button"
                          class="btn btn-warning"
                          data-toggle="modal"
                          data-target=".bs-example-modal-lg"
                        >
                          修改密码
                        </button>
                        <button
                          type="button"
                          class="btn btn-primary"
                          data-toggle="modal"
                          data-target=".teacherInfor"
                          @click="showTeacherInfor"
                        >
                          修改个人信息
                        </button>

                        <button
                          type="button"
                          class="btn btn-primary"
                          data-toggle="modal"
                          data-target=".addCourse"
                          @click=""
                        >
                          添加授课课程
                        </button>
                      </div>

                      <!-- 修改个人信息 -->
                      <div
                        class="modal fade teacherInfor"
                        tabindex="-1"
                        role="dialog"
                        aria-labelledby="myLargeModalLabel"
                      >
                        <div class="modal-dialog modal-lg" role="document">
                          <div class="modal-content">
                            <form class="form-horizontal">
                              <div class="form-group col-xs-7">
                                <label class="col-sm-2 control-label"
                                  >工号：</label
                                >
                                <div class="col-sm-10">
                                  <input
                                    id="teacher_no"
                                    type="text"
                                    class="form-control"
                                    oninput="this.value=this.value.replace(/\s+/g,'');this.value=value.replace(/[^\d]/g,'')"
                                    autocomplete="off"
                                  />
                                </div>
                                <label class="col-sm-2 control-label"
                                  >姓名：</label
                                >
                                <div class="col-sm-10">
                                  <input
                                    id="teacher_name"
                                    type="text"
                                    class="form-control"
                                    autocomplete="off"
                                    oninput="this.value=this.value.replace(/\s+/g,'');value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
                                  />
                                </div>
                                <label class="col-sm-2 control-label"
                                  >手机：</label
                                >
                                <div class="col-sm-10">
                                  <input
                                    id="teacher_phone"
                                    type="text"
                                    class="form-control"
                                    autocomplete="off"
                                    oninput="this.value=this.value.replace(/\s+/g,'');this.value=value.replace(/[^\d]/g,'')"
                                  />
                                </div>
                              </div>
                              <div class="modal-footer">
                                <button
                                  type="button"
                                  class="btn btn-default"
                                  data-dismiss="modal"
                                >
                                  取消
                                </button>
                                <button
                                  type="button"
                                  class="btn btn-primary"
                                  data-dismiss="modal"
                                  @click="changeTeacherInfor"
                                >
                                  确定
                                </button>
                              </div>
                            </form>
                          </div>
                        </div>
                      </div>
                      <!-- 修改个人信息 -->
                    </form>
                    <table class="table table-hover">
                      <tr class="tb_head">
                        <th>专业</th>
                        <th>课程</th>
                        <th>操作</th>
                      </tr>

                      <tr v-for="item in relevanceList">
                        <td>{{ item.profession_name }}</td>
                        <td>{{ item.course_name }}</td>
                        <td>
                          <button
                            type="button"
                            :value="item.relevance_no"
                            class="btn btn-danger"
                            @click="deleteRelevance"
                          >
                            删除
                          </button>
                        </td>
                      </tr>
                    </table>

                    <!-- 修改密码 -->
                    <div
                      class="modal fade bs-example-modal-lg"
                      tabindex="-1"
                      role="dialog"
                      aria-labelledby="myLargeModalLabel"
                    >
                      <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                          <form class="form-horizontal">
                            <div class="form-group col-xs-8">
                              <label class="col-sm-2 control-label"
                                >原密码：</label
                              >
                              <div class="col-sm-5">
                                <input
                                  id="oldPassword"
                                  type="password"
                                  class="form-control"
                                  autocomplete="off"
                                  oninput="this.value=this.value.replace(/\s+/g,'')"
                                />
                              </div>
                            </div>

                            <div class="form-group col-xs-8">
                              <label class="col-sm-2 control-label"
                                >新密码：</label
                              >
                              <div class="col-sm-5">
                                <input
                                  id="newPassWord"
                                  type="password"
                                  class="form-control"
                                  autocomplete="off"
                                  oninput="this.value=this.value.replace(/\s+/g,'')"
                                />
                              </div>
                            </div>
                            <div class="modal-footer">
                              <button
                                type="button"
                                class="btn btn-default"
                                data-dismiss="modal"
                              >
                                取消
                              </button>
                              <button
                                type="button"
                                class="btn btn-primary"
                                data-dismiss="modal"
                                @click="changePassWord"
                              >
                                确定
                              </button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                    <!-- 修改密码 -->

                    <!-- 授课课程 -->
                    <div
                      class="modal fade addCourse"
                      tabindex="-1"
                      role="dialog"
                      aria-labelledby="myLargeModalLabel"
                    >
                      <div class="modal-dialog modal-lg" role="document">
                        <div class="modal-content">
                          <form class="form-horizontal">
                            <div class="form-group col-sm-3">
                              <select
                                id="selectProfession"
                                class="form-control"
                              >
                                <option value="-1">---请选择专业---</option>
                                <option
                                  v-for="item in professionList"
                                  :value="item.profession_no"
                                  >{{ item.profession_name }}
                                </option>
                              </select>

                              <select id="selectCourse" class="form-control">
                                <option value="-1">---请选择课程---</option>
                                <option
                                  v-for="item in courseList"
                                  :value="item.course_no"
                                  >{{ item.course_name }}</option
                                >
                              </select>
                            </div>

                            <div class="modal-footer">
                              <button
                                type="button"
                                class="btn btn-default"
                                data-dismiss="modal"
                              >
                                取消
                              </button>
                              <button
                                type="button"
                                class="btn btn-primary"
                                data-dismiss="modal"
                                @click="addRelevance"
                              >
                                确定
                              </button>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                    <!-- 授课课程 -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="js/个人信息.js"></script>
  </body>
</html>
